import React, { useEffect } from "react";
import Vditor from "vditor";
import 'vditor/src/assets/scss/index.scss';

const MDEditor = (props:any) => {
  useEffect(() => {
    const mb = `<pre><code># 1. 运维\n


    # 2. 挂载\n
      
      
    # 3. 部署\n
    </code></pre>
`
    const vditor = new Vditor("vditor", {
      minHeight: 500,
      tab: "",
      mode: "sv",
      toolbarConfig: {
        pin: true,
      },
      cache: {
        enable: true,
      },
      input: (value) => {
          // console.log(value)
         const {onChange} = props;
         if(onChange){
            onChange(value);
            console.log(vditor.getHTML())
         }
      },
      after: () => {
        // debugger;
        const {onAfter,onChange} = props;
        if(onAfter){
            onAfter(vditor)
            vditor.setValue("")
        }
        if(onChange){
            onChange(props.value);
         }
      },
      hint:{
          extend:[
              {
                  key: "/mb",
                  hint: (key) => {
                      return [{html:'模板',value:mb}]
                  },
              }
          ]
      },
      upload: {
        accept: 'image/*,.pdf,.txt,.xlsx,.docx,.doc',
        token: 'xxyyuunn',
        fieldName:'file',
        url: '/api/machine/upload',
        linkToImgUrl: '/api/machine/upload',
        filename (name) {
          return name.replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '').
            replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '').
            replace('/\\s/g', '')
        },
      },
    });
    // return () => vditor && vditor.destroy();
  }, []);
  return <div id="vditor"></div>;
};
export default MDEditor;